<script setup>

import * as indexApi from "@/api/index.js";
import {onMounted, onUnmounted, ref} from "vue";

let props = defineProps({
  // 是否显示抽屉
  show: {
    type: Boolean,
    default: false
  },
  // 是否自动更新状态
  autoUpdate: {
    type: Boolean,
    default: false
  },
});

let emits = defineEmits([
  'onBack'
]);

let timer = null;

let statInfo = ref({
  serverTime: 0,
  totalRoomCount: 0,
  liveScanDelay: "/",
  playScanDelay: "/",
  infoScanDelay: "/",
  lastLiveScanTime: "/",
  lastPlayScanTime: "/",
  lastInfoScanTime: "/",
  liveScanRound: 0,
  playScanRound: 0,
  infoScanRound: 0,
  liveScanCount: 0,
  playScanCount: 0,
  infoScanCount: 0,
  liveScanRate: 0,
  playScanRate: 0,
  infoScanRate: 0,
  liveScanEfficiency: 0,
  playScanEfficiency: 0,
  infoScanEfficiency: 0,
});

// 关闭抽屉时的事件
const onBack = () => {
  emits('onBack')
};

/**
 * 获取统计数据
 * @returns {Promise<axios.AxiosResponse<any>>}
 */
const fetchStat = () => {
  return indexApi.stat({}).then((res) => {
    statInfo.value = res.data;
    return true;
  })
}

// 组件加载时加载一次数据
onMounted(() => {
  fetchStat();
  if (props.autoUpdate) {
    timer = setInterval(fetchStat, 5000);
  }
});

// 组件销毁时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

</script>

<template>
  <el-drawer
      @closed="onBack"
      v-model="props.show"
      :with-header="false"
  >
    <div>
      <el-page-header @back="onBack">
        <template #content>
          <div class="flex items-center">
            <span class="text-large font-600 mr-3"> 服务质量统计 </span>
          </div>
        </template>
        <template #extra>
          <div class="flex items-center">
            <el-button type="primary" class="ml-2" @click="fetchStat">刷新</el-button>
          </div>
        </template>
        <el-descriptions :column="1" border size="small" style="margin-top: 10px" title="基本信息">
          <el-descriptions-item label="服务器时间">
            <span>{{ new Date(statInfo.serverTime * 1000).toLocaleString() }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="监控播间数">
            <span>{{ statInfo.totalRoomCount }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="3" border size="small" style="margin-top: 10px" title="游戏状态更新">
          <el-descriptions-item label="时延">
            <span>{{ statInfo.playScanDelay }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="轮次">
            <span>{{ statInfo.playScanRound }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="效率">
            <span><b>{{ statInfo.playScanEfficiency }}</b> s <small>/ Per</small></span>
          </el-descriptions-item>
          <el-descriptions-item label="上次" span="3">
            <span>{{ statInfo.lastPlayScanTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="进度" span="3">
            <span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="statInfo.playScanRate"
                  :status=" statInfo.playScanRate !== 100 ? 'primary':'success'"
                  :striped="statInfo.playScanRate !== 100"
                  :striped-flow="statInfo.playScanRate !== 100"
                  duration="20"
              />
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="3" border size="small" style="margin-top: 10px" title="开播状态更新">
          <el-descriptions-item label="时延">
            <span>{{ statInfo.liveScanDelay }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="轮次">
            <span>{{ statInfo.liveScanRound }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="效率">
            <span><b>{{ statInfo.liveScanEfficiency }}</b> s <small>/ Per</small></span>
          </el-descriptions-item>
          <el-descriptions-item label="上次" span="3">
            <span>{{ statInfo.lastLiveScanTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="进度" span="3">
            <span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="statInfo.liveScanRate"
                  :status=" statInfo.liveScanRate !== 100 ? 'primary':'success'"
                  :striped="statInfo.liveScanRate !== 100"
                  :striped-flow="statInfo.liveScanRate !== 100"
                  duration="20"
              />
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="3" border size="small" style="margin-top: 10px" title="房间信息更新">
          <el-descriptions-item label="时延">
            <span>{{ statInfo.infoScanDelay }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="轮次">
            <span>{{ statInfo.infoScanRound }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="效率">
            <span><b>{{ statInfo.infoScanEfficiency }}</b> s <small>/ Per</small></span>
          </el-descriptions-item>
          <el-descriptions-item label="上次" span="3">
            <span>{{ statInfo.lastInfoScanTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="进度" span="3">
            <span>
              <el-progress
                  :text-inside="true"
                  :stroke-width="24"
                  :percentage="statInfo.infoScanRate"
                  :status=" statInfo.infoScanRate !== 100 ? 'primary':'success'"
                  :striped="statInfo.infoScanRate !== 100"
                  :striped-flow="statInfo.infoScanRate !== 100"
                  duration="20"
              />
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <p style="font-size: 12px">
          服务质量统计信息有助于了解 <b>后台服务</b> 进行数据采集的健康状态, 通常情况下数据都是实时更新的
        </p>
      </el-page-header>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>
